<script lang="ts" setup>
import { computed, ref,onMounted } from 'vue'

import {getCateList,addGoods,editGoods,delGoods,getGoods} from '../../api/shangpinfen.js'


//获取数据
let data=ref([])
onMounted(()=>{
  get()
})

function get(){
  getCateList().then((res:any)=>{
    console.log(res);
    
    data.value=Object.values(res)
  })
}






let dialogVisible = ref(false)
let title = ref<string>('')
let img_path = ref<any>('')
let sort= ref<number>()
let flag = ref(false)

//图片

import { Plus } from '@element-plus/icons-vue'
const imageUrl = ref('')
let handleAvat = (e:any) => {
  let fliedate=e.raw
  img_path.value=fliedate
  const reader = new FileReader()
  reader.onload=()=>{
    imageUrl.value=reader.result as string
    img_path.value=imageUrl.value as string

  }
  reader.readAsDataURL(fliedate)
}

//添加
let add=()=>{
  let obj={
    title:title.value,
    img_path:img_path.value,
    sort:sort.value
  }
  addGoods(obj).then((res:any)=>{
    get()

  
  })
  dialogVisible.value=false
}


//回显功能
let ids=ref('')
const handleEdit = (index: number, row:any) => {
  getGoods(row.id).then((res:any)=>{
    flag.value=true
  title.value=res.title
  sort.value=res.sort
  imageUrl.value=res.img_path
  ids.value=res.id
  })

}

//修改
let xiugai=()=>{
 
  
  let obj={
    title:title.value,
    img_path:imageUrl.value,
    sort:sort.value,
    id:ids.value

  }
  editGoods(obj).then((res:any)=>{
    get()

    flag.value=false
  })
}

//删除功能
const handleDelete = (index: number, row) => {
  delGoods(row.id).then((res:any)=>{
    get()

  })
}




</script>

<template>
        <!-- 添加商品 -->
            <div>
                    <el-button @click="dialogVisible = true">添加商品分类</el-button>
            </div>

                    <!-- 表格 -->
            <el-table :data="data" style="width: 100%">
              <el-table-column label="ID" prop="id" />
        <el-table-column label="名称" prop="title" />
        <el-table-column label="img" prop="img_path"  #default="scope">
            <img :src="scope.row.img_path" alt="" style="width: 100px;height: 100px;">
            </el-table-column>
           
        <el-table-column align="right" label="操作">
       
        <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
            >修改</el-button
            >
            <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
            >
        </template>
        </el-table-column>
            </el-table>




            <!-- //添加弹框 -->
                  
                  <!-- 添加弹框 -->
                        <div>
                            <el-dialog v-model="dialogVisible" title="添加信息" width="800">
                            <span>
                                <!-- 名称 -->
                                <div>
                                    名称:<el-input
                                    placeholder="请输入标题"
                                    style="width: 240px"
                                    v-model="title"
                                />
                             
                                </div>
                            
                                <!-- 排序 -->
                                <div>
                                广告排序：<el-input
                                    placeholder="请输入排序号"
                                    style="width: 240px"
                                    v-model="sort"
                                />
                                </div>

                            
                                 <!-- 图片 -->
                                        <div>
                                            <el-upload
                                    class="avatar-uploader"
                                    :auto-upload="false"
                                    @change="handleAvat($event)"
                                >
                                    <img v-if="imageUrl" :src="imageUrl" class="avatar"  style="width: 100px; height: 100px;"/>
                                    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                                </el-upload>
                                        </div>
                            
                            </span>
                            <template #footer>
                                <div class="dialog-footer">
                                <el-button @click="dialogVisible = false">取消</el-button>
                                <el-button type="primary"  @click="add">
                                    确定
                                </el-button>
                                </div>
                            </template>
                            </el-dialog>
                        </div>

                        <!-- 修改弹框 -->
                         <div>
                            <el-dialog v-model="flag" title="添加信息" width="800">
                            <span>
                                <!-- 名称 -->
                                <div>
                                    名称:<el-input
                                    placeholder="请输入标题"
                                    style="width: 240px"
                                    v-model="title"
                                />
                             
                                </div>
                            
                                <!-- 排序 -->
                                <div>
                                广告排序：<el-input
                                    placeholder="请输入排序号"
                                    style="width: 240px"
                                    v-model="sort"
                                />
                                </div>

                            
                                 <!-- 图片 -->
                                        <div>
                                            <el-upload
                                    class="avatar-uploader"
                                    :auto-upload="false"
                                    @change="handleAvat($event)"
                                >
                                    <img v-if="imageUrl" :src="imageUrl" class="avatar"  style="width: 100px; height: 100px;"/>
                                    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                                </el-upload>
                                        </div>
                            
                            </span>
                            <template #footer>
                                <div class="dialog-footer">
                                <el-button @click="flag = false">取消</el-button>
                                <el-button type="primary"  @click="xiugai">
                                    确定
                                </el-button>
                                </div>
                            </template>
                            </el-dialog>
                        </div>


</template>

<style lang="less" scoped>
</style>
